<template>
<div>
     <div class="home-bottom">
      <div class="bm-dv">
        <img src="/static/img/tubiao/梨花.png" alt="" class="bm-hua">
        <p class="bm-curnane">
          <span>Crafted by</span>
          <span class="bm-backend" @click="goBackend">Curnane</span>
          <i class="iconfont icon-aixin2 bm-aixin"></i>
        </p>
        <div class="bm-link">
          <div v-for="bmItem in Lnterlinkage" :key="bmItem.id" class="link-dv">
            <img :src="bmItem.img" alt="" class="link-img">
            <a :href="bmItem.href"  target="_blank">{{bmItem.name}}</a>
          </div>
        </div>
      </div>

    </div>
</div>

</template>
<script>
export default {
    data(){
        return {
            Lnterlinkage:[
                {
                    "name":"RGB",
                    "img":"/static/img/tubiao/彩虹.png",
                    "href":"https://www.sioe.cn/yingyong/yanse-rgb-16/",
                },
                {
                    "name":"runoob",
                    "img":"/static/img/tubiao/菜鸟教程.png",
                    "href":"https://www.runoob.com/",
                },
                {
                    "name":"flex布局",
                    "img":"/static/img/tubiao/花.png",
                    "href":"http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html",
                },
            ]
        }
    },
    mounted(){

    },
    methods:{
      goBackend(){
        let isShow = this.$store.getters.getShow
        // console.log(isShow);
        if(isShow){
          let userType = this.$store.getters.getUser.userType;
          // console.log(userType);
          if(userType=='管理员'){
            this.$router.push("/backend");
          }else{
            this.$router.push("/about")
          }
        }else{
          this.$router.push("/about")
        }
      }
    }
}
</script>
<style scoped>
.home-bottom {
  width: 100%;
  /* background: rgba(255,255,255,.5); */
  background-color: #f6f3ef;
  text-align: center;
  padding: 20px 0;
}
@keyframes hua {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.bm-hua {
  width: 30px;
  height: 30px;
  animation: hua 2s linear infinite;
}
.bm-backend:hover {
  color: pink;
  cursor: pointer;
}
.bm-aixin {
  color: red;
}
.bm-link {
  width: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-around;
  margin: auto;
  font-size: 15px;
}
.link-dv {
  display: flex;
  align-items: center;
}
.link-img {
  width: 15px;
  height: 15px;
}
.bm-backend:hover {
  cursor: pointer;
  color: pink;
}
</style>
